<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>数据流图 - ECharts</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    #main { width: 100%; height: 600px; }
  </style>
</head>
<body>
  <div id="main"></div>
  <script>
    const chart = echarts.init(document.getElementById('main'));
    
    const option = {
      title: {
        text: '一层数据流图'
      },
      tooltip: {},
      series: [{
        type: 'graph',
        layout: 'force',
        roam: true,
        label: {
          show: true,
          position: 'right'
        },
        force: {
          repulsion: 200
        },
        data: [
          { name: '用户', symbolSize: 60 },
          { name: '网页', symbolSize: 60 },
          { name: 'Web服务器', symbolSize: 80 },
          { name: '数据库', symbolSize: 70 }
        ],
        links: [
          { source: '用户', target: '网页', label: { show: true, formatter: '提交表单' } },
          { source: '网页', target: 'Web服务器', label: { show: true, formatter: '发送请求' } },
          { source: 'Web服务器', target: '数据库', label: { show: true, formatter: '查询数据' } },
          { source: '数据库', target: 'Web服务器', label: { show: true, formatter: '返回结果' } },
          { source: 'Web服务器', target: '网页', label: { show: true, formatter: '渲染响应' } },
          { source: '网页', target: '用户', label: { show: true, formatter: '显示页面' } }
        ]
      }]
    };

    chart.setOption(option);
  </script>
</body>
</html>
